<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="快速了解nodejs, 杜顺">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>快速了解nodejs | 杜顺</title>
    <link rel="icon" type="image/png" href="/ds/medias/logo1.png">

    <link rel="stylesheet" type="text/css" href="/ds/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/ds/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/ds/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/ds/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/ds/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/ds/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/ds/css/my.css">

    <script src="/ds/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 5.1.1"><link rel="alternate" href="/ds/atom.xml" title="杜顺" type="application/atom+xml">
<link rel="stylesheet" href="/ds/css/prism-tomorrow.css" type="text/css"></head>


<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/ds/" class="waves-effect waves-light">
                    
                    <img src="/ds/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">杜顺</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/ds/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">杜顺</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/ds/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('/ds/medias/featureimages/4.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">快速了解nodejs</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/ds/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        height: calc(100vh - 250px);
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/ds/tags/js/">
                                <span class="chip bg-color">js</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/ds/categories/nodejs/" class="post-category">
                                nodejs
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2018-12-22
                </div>
                

                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    3.7k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    15 分
                </div>
                

                
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
        </div>
        <hr class="clearfix">
        <div class="card-content article-card-content">
            <div id="articleContent">
                <h1 id="nodejs"><a href="#nodejs" class="headerlink" title="nodejs"></a>nodejs</h1><h1 id="了解nodejs"><a href="#了解nodejs" class="headerlink" title="了解nodejs"></a>了解nodejs</h1><h2 id="一-什么是Nodejs"><a href="#一-什么是Nodejs" class="headerlink" title="一 什么是Nodejs"></a>一 什么是Nodejs</h2><p>Nodejs是使用了Javascript这门语言来开发。</p>
<p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。</p>
<p>Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
<p>Node.js 的包管理器 npm，当你安装Node的时候就自动安装了npm，是全球最大的开源库生态系统，简单的说 Node.js 就是运行在服务端的 JavaScript。</p>
<p>Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。</p>
<p>Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。</p>
<p>Node.js中 DOM和BOM不存在所以事件不存在，使用req.on绑定事件</p>
<p><code>俗话</code> 就是一个 “软件”, 只不过这个软件是用来执行 js 文件</p>
<p>环境就是配置再你电脑里面的一个程序, 不存在桌面图标, 依靠命令行</p>
<h2 id="二-Nodejs和前端js有什么区别"><a href="#二-Nodejs和前端js有什么区别" class="headerlink" title="二 Nodejs和前端js有什么区别"></a>二 Nodejs和前端js有什么区别</h2><h3 id="1-前端"><a href="#1-前端" class="headerlink" title="1 前端:"></a>1 前端:</h3><p>有三部分组成</p>
<p>（1）DOM -（文档对象模型 ）</p>
<p>是由html 给的, 因为你的 js 文件是在 html 文件里面被引入执行的</p>
<p>（2）BOM-（浏览器对象模型）</p>
<p>是由浏览器 给的, 因为你的 js 文件是在浏览器环境下运行的</p>
<p>（3） ECMAScript</p>
<p>js 的语法, 代码怎么写</p>
<h3 id="2-nodejs后端"><a href="#2-nodejs后端" class="headerlink" title="2 nodejs后端:"></a>2 nodejs后端:</h3><p>（1） ECMAScript</p>
<p>使用的是js 的语法</p>
<p>（2）操作电脑的能力</p>
<p>node 给的, 因为你的 js 文件是在命令行运行, 再电脑系统里面运行</p>
<h2 id="三-使用Node之前的准备"><a href="#三-使用Node之前的准备" class="headerlink" title="三 使用Node之前的准备"></a>三 使用Node之前的准备</h2><p>先安装nvm,下载node会自动有npm命令，然后下载yarn（以后下载尽量使用yarn）</p>
<h3 id="1-NVM-node版本管理器和nrm镜像管理"><a href="#1-NVM-node版本管理器和nrm镜像管理" class="headerlink" title="1 NVM node版本管理器和nrm镜像管理"></a>1 NVM node版本管理器和nrm镜像管理</h3><p>项目中可能遇到两个项目node版本不一样，nvm可以安装多个版本node，不同版本随意切换，<code>切记</code>安装完NVM之后在进行Nodejs的安装从官网上下载<code>node 安装包</code>进行安装，官网下载地址：<a target="_blank" rel="noopener" href="http://nodejs.cn/download/">http://nodejs.cn/download/</a> 按装之后会自动安装npm</p>
<p>NVM下载地址：<a target="_blank" rel="noopener" href="https://github.com/coreybutler/nvm-windows/releases">https://github.com/coreybutler/nvm-windows/releases</a></p>
<p>解决 nvm 下载慢的问题 (选择性使用cnpm,正常不会有问题)<br>在程序安装目录下找到 settings.txt，添加下面两行。</p>
<ul>
<li>node_mirror: <a target="_blank" rel="noopener" href="https://npm.taobao.org/mirrors/node/">https://npm.taobao.org/mirrors/node/</a></li>
<li>npm_mirror: <a target="_blank" rel="noopener" href="https://npm.taobao.org/mirrors/npm/">https://npm.taobao.org/mirrors/npm/</a></li>
</ul>
<h4 id="1-nvm常用指令"><a href="#1-nvm常用指令" class="headerlink" title="(1)nvm常用指令"></a>(1)nvm常用指令</h4><table>
<thead>
<tr>
<th>编号</th>
<th>NVm命令</th>
<th>简介</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>nvm version或nvm -v</td>
<td>查看nvm版本</td>
</tr>
<tr>
<td>2</td>
<td>nvm install 10.6.2或者nvm i XXXX</td>
<td>安装node10.6.2版本（附带安装npm）</td>
</tr>
<tr>
<td>3</td>
<td>nvm uninstall 10.6.2</td>
<td>卸载node10.6.2版本</td>
</tr>
<tr>
<td>4</td>
<td>nvm list</td>
<td>查看node版本</td>
</tr>
<tr>
<td>5</td>
<td>nvm use 10.6.2</td>
<td>将node版本切换到10.6.2版本</td>
</tr>
<tr>
<td>6</td>
<td>nvm root</td>
<td>查看nvm安装路径</td>
</tr>
<tr>
<td>7</td>
<td>nvm install latest</td>
<td>下载最新的node版本和与之对应的npm版本</td>
</tr>
</tbody></table>
<h4 id="2-nrm-镜像管理"><a href="#2-nrm-镜像管理" class="headerlink" title="(2) nrm 镜像管理"></a>(2) nrm 镜像管理</h4><p>安装：</p>
<pre><code>yarn global add nrm
1</code></pre>
<table>
<thead>
<tr>
<th>编号</th>
<th>nrm命令</th>
<th>简介</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>nrm ls</td>
<td>查看所有的镜像</td>
</tr>
<tr>
<td>2</td>
<td>nrm add name url</td>
<td>添加自定义的npm源，name 为自定义源名称 ，url为npm源链接</td>
</tr>
<tr>
<td>3</td>
<td>nrm use name</td>
<td>切换npm镜像 name 为自定义源名称</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h3 id="2-npm和yarn"><a href="#2-npm和yarn" class="headerlink" title="2 npm和yarn"></a>2 npm和yarn</h3><p>npm的海量模块，使得我们开发复杂的NodeJs的程序变得更为简单。<a target="_blank" rel="noopener" href="http://www.npmjs.com/">www.npmjs.com</a></p>
<h4 id="1-npm常用命令"><a href="#1-npm常用命令" class="headerlink" title="(1) npm常用命令"></a>(1) npm常用命令</h4><table>
<thead>
<tr>
<th>编号</th>
<th>npm命令</th>
<th>简介</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>npm install XXXX</td>
<td>安装Node包（XXXX包名称）<code>标注a</code></td>
</tr>
<tr>
<td>2</td>
<td>npm uninstall XXXX</td>
<td>卸载Node包（XXXX包名称）–save-dev(本地项目卸载)/-g(全局包卸载)</td>
</tr>
<tr>
<td>3</td>
<td>npm config get prefix</td>
<td>查看全局安装路径</td>
</tr>
<tr>
<td>4</td>
<td>npm init</td>
<td>初始化目录生成package.json配置文件</td>
</tr>
<tr>
<td>5</td>
<td>npm cache clean</td>
<td>删除安装包缓存</td>
</tr>
<tr>
<td>6</td>
<td>npm update XXXX</td>
<td>更新安装包</td>
</tr>
<tr>
<td>7</td>
<td>npm ls</td>
<td>查看本地安装包</td>
</tr>
<tr>
<td>8</td>
<td>npm root</td>
<td>查看当前包安装路径 npm root -g 查看全局包安装路径</td>
</tr>
<tr>
<td>9</td>
<td>npm run XXX</td>
<td>运行某一个命令</td>
</tr>
<tr>
<td>10</td>
<td>npm install</td>
<td>安装package.json 中的所有文件</td>
</tr>
</tbody></table>
<h5 id="a-标注a-npm-install"><a href="#a-标注a-npm-install" class="headerlink" title="a 标注a npm install"></a>a <code>标注a</code> npm install</h5><p>（1）npm install XXXX-g 为全局安装</p>
<p>（2）npm install <a href="mailto:XXXX@5.1.1">XXXX@5.1.1</a> 安装特定版本插件</p>
<p>（3）npm install XXXX–save 会在package.json的dependencies属性下添加XXXX即发布依赖时候任依赖的插件</p>
<ul>
<li>–save是对生产环境所需依赖的声明(开发应用中使用的框架，库)，会压缩到线上</li>
</ul>
<p>（4）npm install XXXX–save-dev 会在package.json的devDependencies属性下添加XXXX依赖 即开发依赖插件</p>
<ul>
<li>–save-dev是对开发环境所需依赖的声明(构建工具，测试工具).正常使用npm install时，会下载dependencies和devDependencies中的模块，不会压缩到线上仅仅作为开发时候使用例如 jQuery</li>
</ul>
<h4 id="2-Yarn是什么？"><a href="#2-Yarn是什么？" class="headerlink" title="(2) Yarn是什么？"></a>(2) Yarn是什么？</h4><p>“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如<a href="https://link.jianshu.com/?t=http://link.zhihu.com/?target=https://code.facebook.com/posts/1840075619545360">官方文档</a>中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了：</p>
<ul>
<li><code>npm install</code>的时候<strong>巨慢</strong>。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。</li>
<li>同一个项目，安装的时候<strong>无法保持一致性</strong>。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。</li>
</ul>
<p>yarn安装</p>
<pre><code>npm i yarn -g
1</code></pre>
<h4 id="4-Yarn常用命令"><a href="#4-Yarn常用命令" class="headerlink" title="(4) Yarn常用命令"></a>(4) Yarn常用命令</h4><p>和npm类似</p>
<table>
<thead>
<tr>
<th>编号</th>
<th>yarn命令</th>
<th>简介</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>yarn add XXXX</td>
<td>安装Node包（XXXX包名称）<code>标注a</code></td>
</tr>
<tr>
<td>2</td>
<td>yarn remove XXXX</td>
<td>卸载Node包（XXXX包名称）yarn global remove X（删除全局）</td>
</tr>
<tr>
<td>3</td>
<td>yarn install或 yarn</td>
<td>安装package.json 中的所有文件</td>
</tr>
<tr>
<td>4</td>
<td>yarn update XXXX</td>
<td>更新安装包 不填写则安装全部</td>
</tr>
<tr>
<td>5</td>
<td>yarn list</td>
<td>列出当前项目的依赖</td>
</tr>
<tr>
<td>6</td>
<td>yarn config list</td>
<td>显示当前配置</td>
</tr>
<tr>
<td>7</td>
<td>yarn init</td>
<td>初始化目录生成package.json配置文件</td>
</tr>
<tr>
<td>8</td>
<td>yarn run XXX</td>
<td>运行某一个命令可简写yarn XXXX</td>
</tr>
</tbody></table>
<h5 id="a-标注a-yarn-install"><a href="#a-标注a-yarn-install" class="headerlink" title="a 标注a yarn install"></a>a <code>标注a</code> yarn install</h5><p>（1）yarn global add XXXX 为全局安装</p>
<p>（2）yarn add XXXX @5.1.1 安装特定版本插件</p>
<p>（3）yarn add XXXX–save yarn默认会在package.json的dependencies属性下添加XXXX即发布依赖时候任依赖的插件</p>
<p>（4）yarn add XXXX–dev 会在package.json的devDependencies属性下添加XXXX依赖 即开发依赖插件 yarn 简写 -D</p>
<h5 id="b-yarn修改全局安装路径和环境配置"><a href="#b-yarn修改全局安装路径和环境配置" class="headerlink" title="b yarn修改全局安装路径和环境配置"></a>b yarn修改全局安装路径和环境配置</h5><p>解决使用yarn安装的插件不可用的情况</p>
<p>在终端中</p>
<pre class=" language-bash"><code class="language-bash"><span class="token comment" spellcheck="true">#1.改变npm 全局安装位置</span>
<span class="token function">npm</span> config <span class="token keyword">set</span> prefix <span class="token string">"你的磁盘路径"</span>
<span class="token comment" spellcheck="true">#这里是我的路径</span>
<span class="token function">npm</span> config <span class="token keyword">set</span> prefix <span class="token string">"D:\appCache\nodejs\node_global"</span>
1234
<span class="token comment" spellcheck="true">#2. 改变 npm 缓存位置</span>
<span class="token function">npm</span> config <span class="token keyword">set</span> cache <span class="token string">"你的磁盘路径"</span>
<span class="token comment" spellcheck="true">#这里是我的路径</span>
<span class="token function">npm</span> config <span class="token keyword">set</span> cache <span class="token string">"D:\appCache\nodejs\node_cache"</span>
1234</code></pre>
<p>然后配置一下系统环境变量</p>
<p>将 <code>D:\appCache\nodejs\node_global</code> 和 <code>D:\appCache\nodejs\node_global\node_modules</code> 这两个添加到你的系统环境变量中。</p>
<p>我们需要将 <code>D:\appCache\yarn\global\node_modules\.bin</code> 整个目录 添加到系统环境变量中去，否则通过yarn 添加的全局包 在cmd 中是找不到的。</p>
<p>检查当前yarn 的 bin的 位置</p>
<pre class=" language-bash"><code class="language-bash">yarn global bin
1</code></pre>
<p>检查当前 yarn 的 全局安装位置</p>
<pre class=" language-bash"><code class="language-bash">yarn global <span class="token function">dir</span>
1</code></pre>
<h3 id="3-nodemon实时监听器"><a href="#3-nodemon实时监听器" class="headerlink" title="3 nodemon实时监听器"></a>3 nodemon实时监听器</h3><p>用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。</p>
<p>终端输入</p>
<pre><code>npm install -g nodemon
1</code></pre>
<p>安装完 nodemon 后，就可以用 nodemon 来代替 node 来启动应用：</p>
<p>nodemon [node.js文件]（相当于 node [node.js文件]）</p>
<h4 id="1-nodemon报错解决"><a href="#1-nodemon报错解决" class="headerlink" title="(1) nodemon报错解决"></a>(1) nodemon报错解决</h4><p><img src="https://img-blog.csdnimg.cn/20200808151821770.png" alt="在这里插入图片描述"></p>
<p>在使用的时候可能会遇到这种情况nodemon无法使用的情况，首先是否全局安装<code>npm install nodemon -g</code></p>
<p>如果还是不可以那就是没有配置环境变量以步骤</p>
<h5 id="a-解决方法1"><a href="#a-解决方法1" class="headerlink" title="a 解决方法1"></a>a 解决方法1</h5><ol>
<li><p>首先在终端输入命令<code>npm config get prefix</code> 查看npm安装路径，</p>
</li>
<li><p>复制路径打开我的电脑找到该路径下=&gt;node_modules=&gt;可以看到所有的安装模块找到nodemon找到bin然后复制路径</p>
</li>
<li><p>在系统环境变量的path中添加刚刚复制的路径</p>
<p>我的电脑右击属性=&gt;高级系统设置=&gt;环境变量=&gt;系统变量中找到path把刚刚复制的路径新建添加</p>
</li>
<li><p>重启vscode</p>
</li>
</ol>
<h5 id="b-解决方法2-也可以解决yarn报错问题"><a href="#b-解决方法2-也可以解决yarn报错问题" class="headerlink" title="b 解决方法2 也可以解决yarn报错问题"></a>b 解决方法2 也可以解决yarn报错问题</h5><ol>
<li>搜索找到powerShell以管理员的身份打开</li>
<li>输入set-ExecutionPolicy RemoteSigned</li>
<li>选择 A 或者 Y，然后重启</li>
</ol>
<h1 id="Ⅱ-贰-Nodejs模块"><a href="#Ⅱ-贰-Nodejs模块" class="headerlink" title="Ⅱ - 贰 - Nodejs模块"></a>Ⅱ - 贰 - Nodejs模块</h1><p>因为node.js是基于CommonJs规范的，所以在node.js模块系统中，每个文件都被视为是一个独立的模块。</p>
<p>node.js模块主要分为三类：内置模块、第三方模块、自定义模块。</p>
<h2 id="一-第三方模块"><a href="#一-第三方模块" class="headerlink" title="一 第三方模块"></a>一 第三方模块</h2><p>在 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/package">npmjs.com官网</a>上，我们可以下载别人已经封装好的模块到自己的项目中使用，这些模块都是第三方模块</p>
<p>例如 jquer 安装的时候会根据后缀安装 -g全局安装会安装在本地 不填写默认安装在本项目的node_modules（没有的话会自动创建）文件目录下</p>
<h2 id="二-自定义模块"><a href="#二-自定义模块" class="headerlink" title="二 自定义模块"></a>二 自定义模块</h2><pre><code>自定义模块取自网络</code></pre>
<p>我们可以从官网上下载别人写好的模块直接使用，也可以按照自己的项目需要，封装模块，发布到官网上，让别人来下载使用。</p>
<p>这里说一下npm包发布的流程：</p>
<ol>
<li>注册npmjs官网账号，官网地址：<a target="_blank" rel="noopener" href="https://www.npmjs.com/%EF%BC%9B">https://www.npmjs.com/；</a></li>
<li>创建你要发布的项目，创建完成后，在终端执行<code>npm init -y</code>, 生成Package.json 文件，填写包的名称、版本号、入口文件等，要保证包的名称在官网上是唯一的；</li>
<li>执行发布，终端输入<code>npm login</code>回车，输入账号，密码，登录npmjs官网；然后输<code>npm publish</code>，就可以将包发布到官网了；</li>
<li>查看，打开npmjs网站 ，进入个人中心–&gt;packages，就可以看到发布的包；</li>
<li>更新，修改完代码内容后，改变package.json里面版本号，再执行<code>npm publish</code>，就可以更新发布了，在官网上可以看到自己发布过的版本；</li>
<li>使用方式，终端中使用<code>npm i 包名称</code>安装包，然后在文件中使用<code>require(包名称)</code>，将包导入自己的项目中，就可以使用了；</li>
<li>撤销已经发布的包版本，终端中输入<code>npm unpublish 包名称@版本号</code>；</li>
</ol>
<h2 id="三-内置模块"><a href="#三-内置模块" class="headerlink" title="三 内置模块"></a>三 内置模块</h2><h4 id="0-常用Nodejs模块"><a href="#0-常用Nodejs模块" class="headerlink" title="(0)常用Nodejs模块"></a>(0)常用Nodejs模块</h4><table>
<thead>
<tr>
<th>内置模块名称</th>
<th>简介</th>
</tr>
</thead>
<tbody><tr>
<td>url</td>
<td>用于处理与解析 URL</td>
</tr>
<tr>
<td>querystring</td>
<td>用于解析和格式化 URL 查询字符串；</td>
</tr>
<tr>
<td>http</td>
<td>HTTP服务；</td>
</tr>
<tr>
<td>path</td>
<td>路径，用于处理文件路径和目录路径；</td>
</tr>
<tr>
<td>fs</td>
<td>文件系统，用于文件的读写操作；</td>
</tr>
<tr>
<td>events</td>
<td>事件触发器，用于事件的派发与监听；</td>
</tr>
</tbody></table>
<h4 id="1-url"><a href="#1-url" class="headerlink" title="(1)url"></a>(1)url</h4><ul>
<li>hostname，获取及设置 URL 的主机名部分，它和host的区别是，它不包含端口。</li>
<li>pathname，获取及设置 URL 的路径部分，也就是<strong>端口号后面的所有内容。</strong></li>
<li>port，获取及设置 URL 的端口部分。<strong>http协议的默认端口号是80，https协议的默认端口号是443。ftp协议的默认端口号是21</strong>。</li>
<li>search，获取及设置 URL 的序列化查询部分。也就是 ？号后面的所有内容，包含？号。</li>
</ul>
<p>url.parse() 解析传进来的路径。</p>
<h4 id="2-querystring"><a href="#2-querystring" class="headerlink" title="(2) querystring"></a>(2) querystring</h4><ul>
<li><code>querystring.parse()</code>将 URL 查询字符串 str 解析为键值对的集合。</li>
<li><code>querystring.stringify()</code>将传入的对象拼接成字符串。</li>
</ul>
<h4 id="3-http"><a href="#3-http" class="headerlink" title="(3) http"></a>(3) http</h4><ul>
<li><code>http.createServer</code>：创建server对象</li>
<li><code>http.get</code>：执行http get请求</li>
<li><code>http.request()</code> ：一般用来发送POST请求。</li>
</ul>
<h4 id="4-path"><a href="#4-path" class="headerlink" title="(4) path"></a>(4) path</h4><ul>
<li><code>path.basename</code>：返回一个路径的最后一部分</li>
<li><code>path.dirname</code>：返回一个路径的目录名</li>
<li><code>path.extname</code>：返回一个路径的扩展名</li>
<li><code>path.join</code>：用于拼接给定的路径片段</li>
<li><code>path.normalize</code>：将一个路径正常化</li>
</ul>
<h4 id="标注"><a href="#标注" class="headerlink" title="标注"></a>标注</h4><p>以上详解转至另一位大神地址：<a target="_blank" rel="noopener" href="https://blog.csdn.net/Charissa2017/article/details/104951488">https://blog.csdn.net/Charissa2017/article/details/104951488</a></p>
<h1 id="Ⅳ-肆-Node的使用"><a href="#Ⅳ-肆-Node的使用" class="headerlink" title="Ⅳ - 肆 - Node的使用"></a>Ⅳ - 肆 - Node的使用</h1><h2 id="一-ES6和Nodejs导出文件和导入文件"><a href="#一-ES6和Nodejs导出文件和导入文件" class="headerlink" title="一 ES6和Nodejs导出文件和导入文件"></a>一 ES6和Nodejs导出文件和导入文件</h2><p>在Nodejs中导出带有./为自定义模块 内置的不需要添加路径</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">//es6的模块导出</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Box</span><span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">//node的模块导出</span>
module<span class="token punctuation">.</span>exports<span class="token operator">=</span>obj<span class="token punctuation">;</span><span class="token comment" spellcheck="true">//默认导出一个对象</span>

exports<span class="token punctuation">.</span>o<span class="token operator">=</span>o<span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>o1<span class="token operator">=</span>o1<span class="token punctuation">;</span> 
exports<span class="token punctuation">.</span>abc<span class="token operator">=</span>abc<span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// node导出多个对象 */</span>

<span class="token number">1234567891011</span>
<span class="token comment" spellcheck="true">//es6中导入模块</span>
<span class="token keyword">import</span> Box <span class="token keyword">from</span> <span class="token string">"./js/a.js"</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">//node中导入模块</span>
<span class="token keyword">var</span> obj<span class="token operator">=</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./js/a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token number">1234567</span></code></pre>
<h2 id="二-创建一个Node服务"><a href="#二-创建一个Node服务" class="headerlink" title="二 创建一个Node服务"></a>二 创建一个Node服务</h2><h4 id="1-统配"><a href="#1-统配" class="headerlink" title="(1) 统配"></a>(1) 统配</h4><pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">const</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'http'</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> app <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span> response<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    request<span class="token punctuation">.</span>method<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//判断是GET请求还是POST请求</span>
    request<span class="token punctuation">.</span>url<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//路径端口号后面的内容</span>
    request<span class="token punctuation">.</span>header<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//请求头内容</span>
    request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"data"</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//收到客户端发来的数据</span>
    request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"end"</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=</span><span class="token operator">></span><span class="token punctuation">{</span>  <span class="token comment" spellcheck="true">//数据接收完毕</span>
        response<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//设置响应头内容</span>
        response<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//发送数据给客户端</span>
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//响应完毕</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>    <span class="token comment" spellcheck="true">//开启服务</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'localtion start 3000'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token number">123456789101112131415</span></code></pre>
<h4 id="2-前后通信"><a href="#2-前后通信" class="headerlink" title="(2) 前后通信"></a>(2) 前后通信</h4><p>在html中的请求数据的接口要对应请求的服务器接口，因为是本地服务器所以域名为当前计算机的域名</p>
<p>index.js</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">//载入http内置模块</span>
<span class="token keyword">var</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"http"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">//内置模块 将 URL 查询字符串 str 解析为键值对的集合。</span>
<span class="token keyword">var</span> querystring <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"querystring"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> server <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>req<span class="token punctuation">,</span> res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment" spellcheck="true">// req 请求对象</span>
  <span class="token comment" spellcheck="true">// res 响应对象</span>

  <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">//收到客户端发过来的数据</span>
  req<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"data"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>_data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    data <span class="token operator">+</span><span class="token operator">=</span> _data<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">//数据接收完毕</span>
  req<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"end"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">//对数据的处理  判断数据去除空格后长度</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> data <span class="token operator">=</span> req<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">"?"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token comment" spellcheck="true">//把数据转换为数组</span>
        data <span class="token operator">=</span> JSON<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> data <span class="token operator">===</span> <span class="token string">"string"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token comment" spellcheck="true">//将 URL 查询字符串 str 解析为键值对的集合。</span>
        data <span class="token operator">=</span> querystring<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">"错误的消息"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment" spellcheck="true">//</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">"错误的消息"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment" spellcheck="true">//200 为响应码</span>
    res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token comment" spellcheck="true">//解决乱码问题</span>
      <span class="token string">"content-type"</span><span class="token punctuation">:</span> <span class="token string">"text/html;charset=utf-8"</span><span class="token punctuation">,</span>
      <span class="token comment" spellcheck="true">//允许跨域请求 *代表通配符</span>
      <span class="token string">"Access-Control-Allow-Origin"</span><span class="token punctuation">:</span> <span class="token string">"*"</span>
      <span class="token comment" spellcheck="true">//  cors跨域</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>user <span class="token operator">?</span> data<span class="token punctuation">.</span>user <span class="token punctuation">:</span> <span class="token string">"你没有user"</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"欢迎光临"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//发送数据给客户端</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//响应完毕</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">//监听服务器访问设置端口号4006</span>
<span class="token comment" spellcheck="true">//listen 参数有三个分别是  端口号 IP地址 回调函数</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">4006</span><span class="token punctuation">,</span> <span class="token string">"10.9.65.202"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"创建服务成功"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token number">1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556</span></code></pre>
<p>index.html</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">></span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">></span>

<span class="token operator">&lt;</span>head<span class="token operator">></span>
  <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0"</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>title<span class="token operator">></span>Document<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">></span>

<span class="token operator">&lt;</span>body<span class="token operator">></span>
  <span class="token operator">&lt;</span>form action<span class="token operator">=</span><span class="token string">"http://10.9.65.202:4006"</span> method<span class="token operator">=</span><span class="token string">"GET"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"text"</span> name<span class="token operator">=</span><span class="token string">"user"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>button type<span class="token operator">=</span><span class="token string">"submit"</span><span class="token operator">></span>提交<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token comment" spellcheck="true">//或者使用Ajax 请求数据</span>
<span class="token operator">&lt;</span><span class="token operator">--</span> <span class="token operator">&lt;</span>script<span class="token operator">></span>
                <span class="token keyword">var</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
            user<span class="token punctuation">:</span><span class="token string">"xietian"</span><span class="token punctuation">,</span>
            age<span class="token punctuation">:</span><span class="token number">30</span><span class="token punctuation">,</span>
            sex<span class="token punctuation">:</span><span class="token string">"男"</span>
        <span class="token punctuation">}</span>

            <span class="token keyword">var</span> xhr<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//XMLHTTPRequest</span>
            xhr<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"load"</span><span class="token punctuation">,</span>loadHandler<span class="token punctuation">)</span><span class="token punctuation">;</span>
            xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span><span class="token string">"http://10.9.65.239:4006?user=xietian"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


        <span class="token keyword">function</span> <span class="token function">loadHandler</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>


<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span><span class="token operator">--</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">></span>
<span class="token number">123456789101112131415161718192021222324252627282930313233343536</span></code></pre>
<h1 id="0-0-知识点："><a href="#0-0-知识点：" class="headerlink" title="0 - 0 - 知识点："></a>0 - 0 - 知识点：</h1><h2 id="一-全局变量"><a href="#一-全局变量" class="headerlink" title="一 全局变量"></a>一 全局变量</h2><p><code>__dirname</code>：当前文件的目录</p>
<p><code>__filename</code>：当前文件的绝对路径</p>
<script>
        document.querySelectorAll('.github-emoji')
          .forEach(el => {
            if (!el.dataset.src) { return; }
            const img = document.createElement('img');
            img.style = 'display:none !important;';
            img.src = el.dataset.src;
            img.addEventListener('error', () => {
              img.remove();
              el.style.color = 'inherit';
              el.style.backgroundImage = 'none';
              el.style.background = 'none';
            });
            img.addEventListener('load', () => {
              img.remove();
            });
            document.body.appendChild(img);
          });
      </script>
            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/ds/about" rel="external nofollow noreferrer">杜顺</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://dusun.gitee.io/ds/ds/2018/12/22/kuai-su-liao-jie-nodejs/">https://dusun.gitee.io/ds/ds/2018/12/22/kuai-su-liao-jie-nodejs/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="/ds/about" target="_blank">杜顺</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/ds/tags/js/">
                                    <span class="chip bg-color">js</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/ds/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/ds/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/ds/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/ds/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/ds/2019/01/22/webpack-de-te-xing/">
                    <div class="card-image">
                        
                        
                        <img src="/ds/medias/featureimages/21.jpg" class="responsive-img" alt="Webpack的特性">
                        
                        <span class="card-title">Webpack的特性</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            小知识1.Webpack的特性webpack 模块打包机，分析你的项目结构，找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），将其打包为合适的格式以供浏览器使用。
webpack具有r
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2019-01-22
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/ds/categories/vue/" class="post-category">
                                    vue
                                </a>
                            
                            <a href="/ds/categories/vue/react/" class="post-category">
                                    react
                                </a>
                            
                            <a href="/ds/categories/vue/react/webpack/" class="post-category">
                                    webpack
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/ds/tags/js/">
                        <span class="chip bg-color">js</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/ds/2018/09/22/css-bi-jiao-nan-ji-de-shu-xing/">
                    <div class="card-image">
                        
                        
                        <img src="/ds/medias/featureimages/9.jpg" class="responsive-img" alt="css比较难记的属性">
                        
                        <span class="card-title">css比较难记的属性</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            css比较难记的属性text-decoration: none;//去a标签的下滑线
 color: inherit;//颜色继承
outline:none;//去除轮廓线
text-decoration:line-through;//文字
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2018-09-22
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/ds/categories/html/" class="post-category">
                                    html
                                </a>
                            
                            <a href="/ds/categories/html/css/" class="post-category">
                                    css
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/ds/tags/html/">
                        <span class="chip bg-color">html</span>
                    </a>
                    
                    <a href="/ds/tags/css/">
                        <span class="chip bg-color">css</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/ds/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/ds/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/ds/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/ds/libs/codeBlock/codeShrink.js"></script>


<!-- 代码块折行 -->

<style type="text/css">
code[class*="language-"], pre[class*="language-"] { white-space: pre !important; }
</style>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/ds/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            <span id="year">2018</span>
            <a href="/ds/about" target="_blank">杜顺</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">22.9k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <br>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">


    <a href="mailto:1404898412@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1404898412" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 1404898412" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>





    <a href="https://www.zhihu.com/people/e-e-89-49-49" class="tooltipped" target="_blank" data-tooltip="关注我的知乎: https://www.zhihu.com/people/e-e-89-49-49" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">知</i>
    </a>



</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/ds/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/ds/search.xml", 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/ds/libs/materialize/materialize.min.js"></script>
    <script src="/ds/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/ds/libs/aos/aos.js"></script>
    <script src="/ds/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/ds/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/ds/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/ds/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/ds/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    
    <script type="text/javascript" color="0,0,255"
        pointColor="0,0,255" opacity='0.7'
        zIndex="-1" count="99"
        src="/ds/libs/background/canvas-nest.js"></script>
    

    

    
    <script type="text/javascript" src="/ds/libs/background/ribbon-dynamic.js" async="async"></script>
    

    
    <script src="/ds/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
